State Machine con Custom Hook in React: Padroneggiare l'Astrazione della Logica di Stato Complessa

Con l'aumentare della complessità delle applicazioni React, la gestione dello stato può diventare una sfida significativa. Gli approcci tradizionali che utilizzano `useState` e `useEffect` possono portare rapidamente a logiche ingarbugliate e codice di difficile manutenzione, specialmente quando si ha a che fare con transizioni di stato complesse ed effetti collaterali. È qui che le macchine a stati, e in particolare i custom hook di React che le implementano, vengono in soccorso. Questo articolo vi guiderà attraverso il concetto di macchine a stati, dimostrerà come implementarle come custom hook in React e illustrerà i benefici che offrono per la creazione di applicazioni scalabili e manutenibili per un pubblico globale.

Cos'è una State Machine?

Una macchina a stati (o macchina a stati finiti, FSM) è un modello matematico di calcolo che descrive il comportamento di un sistema definendo un numero finito di stati e le transizioni tra di essi. Pensatela come un diagramma di flusso, ma con regole più rigide e una definizione più formale. I concetti chiave includono:

• Stati: Rappresentano diverse condizioni o fasi del sistema.
• Transizioni: Definiscono come il sistema passa da uno stato all'altro in base a eventi o condizioni specifiche.
• Eventi: Trigger che causano le transizioni di stato.
• Stato Iniziale: Lo stato in cui il sistema inizia.

Le macchine a stati eccellono nel modellare sistemi con stati ben definiti e transizioni chiare. Gli esempi abbondano in scenari del mondo reale:

• Semafori: Passano attraverso stati come Rosso, Giallo, Verde, con transizioni attivate da timer. Questo è un esempio riconoscibile a livello globale.
• Elaborazione Ordini: Un ordine e-commerce potrebbe passare attraverso stati come "In attesa", "In elaborazione", "Spedito" e "Consegnato". Questo si applica universalmente alla vendita al dettaglio online.
• Flusso di Autenticazione: Un processo di autenticazione utente potrebbe includere stati come "Disconnesso", "Accesso in corso", "Connesso" e "Errore". I protocolli di sicurezza sono generalmente coerenti tra i vari paesi.

Perché Usare le State Machine in React?

Integrare le macchine a stati nei componenti React offre diversi vantaggi convincenti:

• Migliore Organizzazione del Codice: Le macchine a stati impongono un approccio strutturato alla gestione dello stato, rendendo il codice più prevedibile e facile da capire. Niente più spaghetti code!
• Complessità Ridotta: Definendo esplicitamente stati e transizioni, è possibile semplificare logiche complesse ed evitare effetti collaterali indesiderati.
• Migliore Testabilità: Le macchine a stati sono intrinsecamente testabili. È possibile verificare facilmente che il sistema si comporti correttamente testando ogni stato e transizione.
• Maggiore Manutenibilità: La natura dichiarativa delle macchine a stati rende più facile modificare ed estendere il codice man mano che l'applicazione si evolve.
• Migliori Visualizzazioni: Esistono strumenti in grado di visualizzare le macchine a stati, fornendo una chiara panoramica del comportamento del sistema, facilitando la collaborazione e la comprensione tra team con competenze diverse.

Implementare una State Machine come Custom Hook di React

Illustriamo come implementare una macchina a stati utilizzando un custom hook di React. Creeremo un semplice esempio di un pulsante che può trovarsi in tre stati: `idle`, `loading` e `success`. Il pulsante parte dallo stato `idle`. Quando viene cliccato, passa allo stato `loading`, simula un processo di caricamento (usando `setTimeout`) e quindi passa allo stato `success`.

1. Definire la State Machine

Per prima cosa, definiamo gli stati e le transizioni della nostra macchina a stati del pulsante:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

Questa configurazione utilizza un approccio agnostico rispetto alla libreria (sebbene ispirato a XState) per definire la macchina a stati. Implementeremo noi stessi la logica per interpretare questa definizione nel custom hook. La proprietà `initial` imposta lo stato iniziale su `idle`. La proprietà `states` definisce i possibili stati (`idle`, `loading` e `success`) e le loro transizioni. Lo stato `idle` ha una proprietà `on` che definisce una transizione allo stato `loading` quando si verifica un evento `CLICK`. Lo stato `loading` utilizza la proprietà `after` per passare automaticamente allo stato `success` dopo 2000 millisecondi (2 secondi). Lo stato `success` è uno stato terminale in questo esempio.

2. Creare il Custom Hook

Ora, creiamo il custom hook che implementa la logica della macchina a stati:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Questo hook `useStateMachine` accetta come argomento la definizione della macchina a stati. Utilizza `useState` per gestire lo stato corrente e il contesto (spiegheremo il contesto più avanti). La funzione `transition` accetta un evento come argomento e aggiorna lo stato corrente in base alle transizioni definite nella macchina a stati. L'hook `useEffect` gestisce la proprietà `after`, impostando dei timer per passare automaticamente allo stato successivo dopo una durata specificata. L'hook restituisce lo stato corrente, il contesto e la funzione `transition`.

3. Usare il Custom Hook in un Componente

Infine, usiamo il custom hook in un componente React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Questo componente utilizza l'hook `useStateMachine` per gestire lo stato del pulsante. La funzione `handleClick` invia l'evento `CLICK` quando il pulsante viene cliccato (e solo se si trova nello stato `idle`). Il componente visualizza un testo diverso in base allo stato corrente. Il pulsante è disabilitato durante il caricamento per prevenire clic multipli.

Gestire il Contesto nelle State Machine

In molti scenari reali, le macchine a stati devono gestire dati che persistono attraverso le transizioni di stato. Questi dati sono chiamati contesto. Il contesto consente di memorizzare e aggiornare informazioni rilevanti man mano che la macchina a stati progredisce.

Estendiamo il nostro esempio del pulsante per includere un contatore che si incrementa ogni volta che il pulsante si carica con successo. Modificheremo la definizione della macchina a stati e il custom hook per gestire il contesto.

1. Aggiornare la Definizione della State Machine

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Abbiamo aggiunto una proprietà `context` alla definizione della macchina a stati con un valore iniziale di `count` pari a 0. Abbiamo anche aggiunto un'azione `entry` allo stato `success`. L'azione `entry` viene eseguita quando la macchina a stati entra nello stato `success`. Accetta il contesto corrente come argomento e restituisce un nuovo contesto con il `count` incrementato. L'`entry` qui mostra un esempio di modifica del contesto. Poiché gli oggetti Javascript vengono passati per riferimento, è importante restituire un *nuovo* oggetto anziché mutare l'originale.

2. Aggiornare il Custom Hook

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Abbiamo aggiornato l'hook `useStateMachine` per inizializzare lo stato `context` con `stateMachineDefinition.context` o un oggetto vuoto se non viene fornito alcun contesto. Abbiamo anche aggiunto un `useEffect` per gestire l'azione `entry`. Quando lo stato corrente ha un'azione `entry`, la eseguiamo e aggiorniamo il contesto con il valore restituito.

3. Usare l'Hook Aggiornato in un Componente

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Ora accediamo a `context.count` nel componente e lo visualizziamo. Ogni volta che il pulsante si carica con successo, il contatore si incrementerà.

Concetti Avanzati sulle State Machine

Sebbene il nostro esempio sia relativamente semplice, le macchine a stati possono gestire scenari molto più complessi. Ecco alcuni concetti avanzati da considerare:

• Guardie (Guards): Condizioni che devono essere soddisfatte affinché una transizione avvenga. Ad esempio, una transizione potrebbe essere consentita solo se un utente è autenticato o se un determinato valore di dati supera una soglia.
• Azioni (Actions): Effetti collaterali che vengono eseguiti entrando o uscendo da uno stato. Questi potrebbero includere chiamate API, aggiornamenti del DOM o l'invio di eventi ad altri componenti.
• Stati Paralleli: Permettono di modellare sistemi con più attività concorrenti. Ad esempio, un lettore video potrebbe avere una macchina a stati per i controlli di riproduzione (play, pausa, stop) e un'altra per la gestione della qualità del video (bassa, media, alta).
• Stati Gerarchici: Permettono di annidare stati all'interno di altri stati, creando una gerarchia. Questo può essere utile per modellare sistemi complessi con molti stati correlati.

Librerie Alternative: XState e Altre

Sebbene il nostro custom hook fornisca un'implementazione di base di una macchina a stati, diverse eccellenti librerie possono semplificare il processo e offrire funzionalità più avanzate.

XState

XState è una popolare libreria JavaScript per creare, interpretare ed eseguire macchine a stati e statechart. Fornisce un'API potente e flessibile per definire macchine a stati complesse, incluso il supporto per guardie, azioni, stati paralleli e stati gerarchici. XState offre anche ottimi strumenti per visualizzare ed eseguire il debug delle macchine a stati.

Altre Librerie

Altre opzioni includono:

• Robot: Una libreria leggera per la gestione dello stato con un focus sulla semplicità e le prestazioni.
• react-automata: Una libreria specificamente progettata per integrare le macchine a stati nei componenti React.

La scelta della libreria dipende dalle esigenze specifiche del vostro progetto. XState è una buona scelta per macchine a stati complesse, mentre Robot e react-automata sono adatti a scenari più semplici.

Best Practice per l'Uso delle State Machine

Per sfruttare efficacemente le macchine a stati nelle vostre applicazioni React, considerate le seguenti best practice:

• Iniziare in Piccolo: Cominciate con macchine a stati semplici e aumentate gradualmente la complessità secondo necessità.
• Visualizzare la Vostra State Machine: Usate strumenti di visualizzazione per ottenere una chiara comprensione del comportamento della vostra macchina a stati.
• Scrivere Test Completi: Testate a fondo ogni stato e transizione per garantire che il vostro sistema si comporti correttamente.
• Documentare la Vostra State Machine: Documentate chiaramente gli stati, le transizioni, le guardie e le azioni della vostra macchina a stati.
• Considerare l'Internazionalizzazione (i18n): Se la vostra applicazione si rivolge a un pubblico globale, assicuratevi che la logica della macchina a stati e l'interfaccia utente siano correttamente internazionalizzate. Ad esempio, utilizzate macchine a stati o contesti diversi per gestire formati di data o simboli di valuta differenti in base alla localizzazione dell'utente.
• Accessibilità (a11y): Assicuratevi che le transizioni di stato e gli aggiornamenti dell'interfaccia utente siano accessibili agli utenti con disabilità. Usate attributi ARIA e HTML semantico per fornire un contesto e un feedback adeguati alle tecnologie assistive.

Conclusione

I custom hook di React combinati con le macchine a stati forniscono un approccio potente ed efficace per gestire logiche di stato complesse nelle applicazioni React. Astraendo le transizioni di stato e gli effetti collaterali in un modello ben definito, è possibile migliorare l'organizzazione del codice, ridurre la complessità, migliorare la testabilità e aumentare la manutenibilità. Sia che implementiate il vostro custom hook o utilizziate una libreria come XState, l'integrazione delle macchine a stati nel vostro flusso di lavoro con React può migliorare significativamente la qualità e la scalabilità delle vostre applicazioni per gli utenti di tutto il mondo.